<!-- 修改信息 -->
<template>
  <div class="updataInfo-container">
    <background></background>
    <div class="main">
      <Head></Head>
      <div class="content">
        <div class="phone">
          <InputBox
            :inputArr="inputArr"
            @synchronization="getInputData"
          ></InputBox>
        </div>
        <div class="avatar">
          <div class="text">头像</div>
          <UploadAvatar @click="getAvatar"></UploadAvatar>
        </div>
        <div class="but">
          <button @click="Submit">修改信息</button>
        </div>
      </div>
    </div>
    <div class="loading" v-if="isLoadingRef">
      <Loading></Loading>
    </div>
  </div>
</template>

<script setup>
import Loading from "@/components/Loading/index.vue";
import { useUserStore } from "@/store/useUserStore.js";
import background from "@/components/background/index.vue";
import Head from "./components/Head.vue";
import InputBox from "@/components/InputBox/index.vue";
import UploadAvatar from "@/components/uploadAvatar/index.vue";
import { updateInformation } from "@/api/user.js";
import { deepClone } from "@/util/copy.js";
import { ref } from "vue";
import { storeToRefs } from "pinia";
const { readUserInfo } = storeToRefs(useUserStore());
const { getUserInfo } = useUserStore();
const isLoadingRef = ref(false);
// 输入框对象
const inputArr = ref([
  {
    title: "手机号",
    phone: "",
    err: [
      { required: false },
      {
        regular:
          "^((13[0-9])|(14)|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$",
        msg: "手机号不符合规则",
      },
    ],
    title_width: 60,
    input_width: 400,
    corresponding: "phone",
    type: "text",
  },
]);
// 深拷贝
const copyInputArr = deepClone(inputArr.value);

function getInputData(data) {
  // 获取inputBox中的数据
  inputArr.value = data;
}
let avatarData = "";
function getAvatar(data) {
  avatarData = data;
}
// 修改信息
async function Submit() {
  isLoadingRef.value = true;
  const subminInputData = {};
  inputArr.value.forEach((item) => {
    if (item[item.corresponding]) {
      subminInputData[item.corresponding] = item[item.corresponding];
    }
  });
  if (avatarData) {
    subminInputData["oldAvatar"] = readUserInfo.value.avatar;
    subminInputData["avatar"] = avatarData;
  }
  if (Object.keys(subminInputData).length === 0) {
    ElMessage.error("请至少完成一条数据输入");
    isLoadingRef.value = false;
    return;
  }
  const { data } = await updateInformation(subminInputData);
  console.log(data);
  if (data) {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    await getUserInfo();
  }
  isLoadingRef.value = false;
}
</script>

<style lang="less" scoped>
@import "@/styles/var.less";
@import "@/styles/mixin.less";
.updataInfo-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  min-height: 600px;
  .main {
    .self-center();
    width: 80%;
    height: 80%;
    background: @bakeground;
    backdrop-filter: blur(5px);
    border-radius: 10px;
    box-shadow: 2px 2px 20px #626262;
    .content {
      padding: 30px 10px;
      div {
        margin: 10px 0;
      }
    }
    .avatar {
      margin-left: 10px;

      display: flex;
      .text {
        color: @gray;
        font-size: 1.1em;
        display: inline-block;
        width: 60px;
        text-align-last: justify;
        text-align: justify;
        text-justify: distribute;
      }
      .uploadAvatar-container {
        margin-left: 10px;
        width: 180px;
        height: 180px;
      }
    }
    .but {
      button {
        margin-left: 60px;
        cursor: pointer;
        width: 140px;
        height: 50px;
        background: linear-gradient(45deg, @frameColor1, @frameColor2);
        border-radius: 10px;
        color: @white;
        font-size: 20px;
        border: 0;
      }
    }
  }
  .loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
}
</style>